<template>
<div class="container">
  <div class="baseItem">
    <div class="baseTitle">toValue用法</div>
    <div class="baseItem_content">
      {{params}},{{nueParams}},{{newData}}
    </div>
  </div>
  <div class="baseItem">
    <div class="baseTitle">文字流光特效</div>
    <div class="baseItem_content" style="background: #1C1A18;color:#ffffff;padding:20px;">
      <h2>鼋博群智能</h2>
      <h2>上善若水，水善利万物而不争</h2>
      <h2>天行健，君子以自强不息</h2>
      <h2>地势坤，君子以厚德载物</h2>
    </div>
  </div>

  <div class="baseItem">
    <div class="baseTitle">测试keepalive</div>
    <div class="baseItem_content">
      <el-input v-model="number"></el-input>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref, toValue } from "vue";

const params = ref('toValue')
const nueParams = toValue(params)
params.value = '1'

const createData = (num) => {
  return  ++ num
}
const newData = toValue(createData(1))

const number = ref('详情见app.vue中的实例代码')
</script>

<style scoped lang="scss">
.container{
  .baseItem{
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    .baseTitle{
      font-size: 18px;
      font-weight: bold;
    }
    &_content{
      h2{
        width:300px;
        //background: -webkit-linear-gradient(135deg, #0eaf6d 0%, #ff6ac6 25%, #147b96 50%, #e6d205 75%, #0eaf6d 100%) 0 0;
        background: linear-gradient(to right, #484848 0%, #484848 45%, #E0DFDF 50%, #484848 55%, #484848 100%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        animation: flowCss 2s infinite ease-out;
      }
    }
  }
}
@-webkit-keyframes flowCss {
  0% {
    /* 移动背景位置 */
    background-position:0 0;
  }

  100% {
    background-position: -200% 0;
  }
}
</style>